<template>
  <div class="poem">
    <button @click="getPoem">获取古诗</button>
    <br/>
    <ul>
      <li v-for="(poem, index) in poemList" :key="index">{{ poem.content }} ——
        {{ poem.author }}《{{ poem.title }}》
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="Poem">
import axios from 'axios'
import {nanoid} from 'nanoid'
import {usePoemStore} from "@/store/poem";
import {type PoemIter, type Poems} from "@/types";

// 从 pinia 里面获取数据
const poemStore = usePoemStore();
let poemList:Poems = poemStore.poemList;

// 获取古诗词的 API
const POEM_URL = 'https://v1.jinrishici.com/all.json';

async function getPoem() {
  let response = await axios.get(POEM_URL);
  let {data: {author: author, content: content, origin: title}} = response;
  let poem: PoemIter = {
    id: nanoid(),
    author: author,
    title: title,
    content: content,
  }
  console.log(poem);
  poemList.unshift(poem);
}
</script>

<style scoped>
.poem {
  background-color: #ffc268;
}
</style>